<template>
	<view class="container">
    <!-- 顶部搜索及定位 -->
    <LocationCalendar page="home" />
    <view class="content">
      <!-- 宫格导航 -->
      <Grid />
      <!-- 横向 tab -->
      <SwitchTab />
      <view class="product">
        <ProductItem />
      </view>
    </view>
	</view>
</template>

<script setup>
  import { ref } from 'vue';
  import LocationCalendar from '@/components/LocationCalendar.vue';
  import Grid from './components/Grid.vue';
  import SwitchTab from '@/components/SwitchTab.vue';
  import ProductItem from '@/components/ProductItem.vue';
  const popupRef = ref()
  const { safeArea } = uni.getSystemInfoSync()
  console.log(safeArea, ' const { safeAreaInsets } = uni.getSystemInfoSync()');
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    .content {
      width: 100%;
      padding: 0 12px;
      box-sizing: border-box;
      transform: translateY(-33px);
    }
  }
</style>
